<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/static/jquery.min.js"></script>
    <script src="/static/echarts.min.js"></script>
    <script src="/static/bootstrap-4.1.3/dist/js/bootstrap.js"></script>

    <script src="/static/datapicker/bootstrap-datetimepicker.js"></script>

    <link href="/static/bootstrap-4.1.3/dist/css/bootstrap.css" rel="stylesheet">
    <link href="/static/datapicker/bootstrap-datetimepicker.css" rel="stylesheet">

   {% comment %} <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>{% endcomment %}
</head>
<body>
<div class="form-content">
        <form id="form-user-add" class="form-horizontal">
            <h4 class="form-header h4">设置条件</h4>
            <div class="row">
            	<div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>股票代码：</label>
                        <div class="col-sm-8">
                            <input name="tscode" id="tscode" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>开始时间：</label>
                        <div class="col-sm-8">
                           <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime"/>
                        </div>
                         </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>结束时间：</label>
                        <div class="col-sm-8">
                           <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>
                        </div>
                    </div>

                </div>

            </div>

             <div class="row">
                    <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>MACD:F：</label>
                        <div class="col-sm-8">
                            <input name="macdF" id="macdF" placeholder="请输入用户名称" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>MACD:SL：</label>
                        <div class="col-sm-8">
                            <input name="macdSL"  id="macdSL" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" required>
                        </div>
                    </div>
                </div>
                 <div class="col-sm-4">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>MACD:SI：</label>
                        <div class="col-sm-8">
                            <input name="macdSI" id="macdSI" placeholder="请输入手机号码" class="form-control" type="text" maxlength="11" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>买：</label>
                        <div class="col-sm-8">
                           <input type="text" class="time-input" id="buy" placeholder="开始时间" name="buy"/>
                        </div>
                         </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>卖：</label>
                        <div class="col-sm-8">
                           <input type="text" class="time-input" id="sell" placeholder="结束时间" name="sell"/>
                        </div>
                    </div>

                </div>

            </div>

         <div class="row">
          <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" id="searchQuery" ><i class="fa fa-check"></i>查 询</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" ><i class="fa fa-reply-all"></i>关 闭 </button>
           </div>
         </div>


        </form>
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 <div id="container" style="width: 900px;height:600px;"></div>


<script type="text/javascript">


$(document).ready(function(){
    var tscode ="";
   showDateLine(tscode);
});


   // var sss = JSON.parse() ;
  //var sssss = jQuery.parseJSON({{data}});

    //var aaaa=eval({{result}});
   // alert("sss:"+aaaa)
   // var sssss=eval({{data}});
//alert("sss:"+sssss)
  //  var x = '{{data.xlist}}';
  //  var y = '{{data.ylist}}';
  //  var xlist = JSON.stringify(x);
  //  var ylist = JSON.stringify(y);
  //  alert("sss:"+sss)
  //  alert("xx:"+xlist)
  //  alert("yyy:"+ylist)


function showDateLine (tscode){





//var dom = document.getElementById("container");
var myChart = echarts.init(document.getElementById('container'));
//var myChart = echarts.init(dom);
//var app = {};
option2 = {
    title: {
        text: "是测试",
        x: 'center',
        show : true
    },
    legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          data: ['预期','实际','假设']
        },

     //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '16%',   // 等价于 y: '16%'
            left: '3%',
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
        // 提示框
        tooltip: {
          trigger: 'axis'
        },
            //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
    xAxis: {
        name: '第几次',
        type: 'category',
         // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,

        //data: xlist
        data: []
    },
    yAxis: {
        name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:100,  // 设置y轴刻度的最大值
          splitNumber:10,  // 设置y轴刻度间隔个数

    },
    series: [{
        //data: ylist,
        data: [],
        type: 'line',
        // 显示数值
        itemStyle : { normal: {label : {show: true}}}
    },
        {
        //data: ylist,
        data: [],
        type: 'bar',
         barWidth : 10,
        // 显示数值
        itemStyle : { normal: {label : {show: true}}}
    }


    ]

};



 $.ajax({
        type: "POST",
        url: "/chartstest/jsonDate/", 				/* 显示折线图的路径 */
       data : {"tscode":tscode},		/* ,"add":add */

        dataType:"json",
        success: function (data) {
             var  ylist = data.ylist;
        	//console.log(""+data);
        	//console.log("===="+data+"==="+begtime);
            //var myChart = echarts.init(dom);
            //myChart.title.text = '稿件统计'; 		/*  */
            //var fData = fmt.formtLineData(data);	/*  */
            option2.xAxis.data = data.xlist;	/*  */
            option2.series[0].data  = ylist;
             option2.series[1].data  =data.brlist;

             //alert(data.xlist)/*  */
             // alert(data.ylist)/*  */
            //alert( option2.series)/*  */

            myChart.setOption(option2,true);			/*  */
        }
    });

{% comment %}if (option2 && typeof option2 === "object") {
       option2.xAxis.data = xlist;	/*  */
       option2.series = ylist;
    myChart.setOption(option2, true);
}{% endcomment %}


}



$('#searchQuery').click(function () {
    var  tscode = $("#tscode").val();
    var  startTime = $("#startTime").val();
    var  endTime = $("#endTime").val();
    var  macdF = $("#macdF").val();
    var  macdSL = $("#macdSL").val();
    var  macdSI = $("#macdSI").val();
    var  buy = $("#buy").val();
    var  sell = $("#sell").val();

　　　　　　　　// 不跨域要携带csrf_token 过去。
            queryParameter = {
                csrfmiddlewaretoken: '{{ csrf_token }}', // 为了防止csrf_token的拦截，所以必须带这个过去。
                tscode:tscode,
                startTime:startTime,
                endTime:endTime,
                macdF:macdF,
                macdSL:macdSL,
                macdSI:macdSI,
                buy:buy,
                sell:sell



            };
            $.ajax({
            url:'/chartstest/computedResult/',
            type:'post',
            data:queryParameter,
            success:function (res) {
                data = JSON.parse(res);
               // alert(data)
                console.log(data);
                showDateLine (tscode);
            },
        })
        })






</script>
</body>
</html>
